<template>
  <div class="bin-details-table">
    <div class="details-title">{{ title }}</div>
    <dynTable
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
  </div>
</template>

<script>
export default {
  name: 'BinDetailsTable',
  props: {
    title: {
      type: String,
      default: ''
    },
    tableColumns: {
      type: Array,
      default: () => ([])
    },
    tableData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      tableLoading: false
    }
  }
}
</script>

<style scoped lang="scss">
.bin-details-table{
    padding-bottom: 20px;
 .details-title {
    width: 100%;
    height: 40px;
    background: #add7ff;
    color: #1a70c1;
    line-height: 40px;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 10px;
  }
}

</style>
